$default-font-size: 16px;
$prmary-color:#00A874;
$black-color:#030303;

// pxTorem function
@function pxTorem($px){
    @return $px / $default-font-size * 1rem;
}

html{
    font-size: $default-font-size;
}

.gk-yc-wrapper{
    a{
        text-decoration: none;
    }
    .modal-bg {
        background: #000;
        opacity: 0.7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    .modal {
        position: absolute;
        top: pxTorem(200px);
        left: 10%;
        z-index: 3;
        background: #FFFFFF;
        border-radius: pxTorem(5px);
        min-height: pxTorem(100px);
        width: 80%;
        padding: pxTorem(18px) pxTorem(20px);
        min-width: pxTorem(300px);
        box-sizing: border-box;

        text-align: center;
        .title {
            font-size: pxTorem(16px);
            font-weight: 200;
            color: $prmary-color;
            letter-spacing: 0;
        }
        .detail {
            color: $black-color;
            letter-spacing: 0;
            line-height: pxTorem(25px);
            text-align: left;
            &.line1{
                margin-top: pxTorem(15px);
            }
            &.line2{
                margin-bottom:pxTorem(10px);
                font-size: pxTorem(12px);
            }
        }
        .btn-bar{
            .btn+.btn{
                margin-left: 0.1rem;
            }
            .btn{
                height: pxTorem(30px);
                font-size: pxTorem(14px);
                width: 45%;
                padding: pxTorem(8px) auto;
                border-radius: 0.1rem;
                font-weight: 100;
                margin: 0;
                outline: 0;
                &:active {
                    opacity: 0.8;
                }
                &.primary{
                    background: #F5A623;
                    color: #FFF;
                    border: none;
                }
                &.ghost{
                    background: transparent;
                    color: $black-color;
                    border: 1px solid $black-color;
                }
            }
        }
    }
    .gk-yc-banner{
        img{
            width: 100%;
        }
    }
    .gk-yc-row{
        padding-left: 4%;
        padding-right: 4%;
    }
    .text-center{
        text-align: center;
    }
    .gk-title{
        margin-top: pxTorem(20px);
        font-size: pxTorem(18px);
        color: #030303;
        letter-spacing: 0;
        line-height: pxTorem(28px);
        font-weight: 400;
    }
    .gk-sub-title{
        margin-top: pxTorem(10px);
        font-size: pxTorem(14px);
        color: #8C9095;
        letter-spacing: 0;
    }
    .gk-yc-input{
        margin-top: pxTorem(25px);
        input, button{
            height: pxTorem(40px);
            // line-height: pxTorem(40px);
            box-sizing: border-box;
        }
        input{
            border: 1px solid #027F59;
            float: left;
            width: 70%;
            padding-left: pxTorem(10px);
            font-size: pxTorem(14px);
            padding: pxTorem(14px) 0 pxTorem(14px) pxTorem(14px);
            color: #8C9095;
            border-radius: 0;
        }
        button{
            width: 30%;
            background: #027F59;
            border: 1px solid #027F59;
            border: 0;
            font-size: pxTorem(14px);
            color: #FFFFFF;
            letter-spacing: 0;
        }
    }
    .gk-detail-title{
        font-size: pxTorem(18px);
        color: #030303;
        letter-spacing: 0;
        position: relative;
        margin-bottom: pxTorem(30px);
        margin-top: pxTorem(30px);
        &::before{
            content:'';
            position: absolute;
            left: 0;
            top: pxTorem(10px);
            width: 25%;
            height: 1px;
            background:  #BDBFC2;
        }
        &::after{
            content:'';
            position: absolute;
            right: 0;
            top: pxTorem(10px);
            width: 25%;
            height: 1px;
            background:  #BDBFC2;
        }
    }
    .gk-detail-item{
        padding: pxTorem(12px);
        background: #F5F5F5;
        margin-bottom: pxTorem(12px);
        font-size: pxTorem(16px);
        color: #030303;
        img{
            width: pxTorem(18px);
            height: pxTorem(13px);
            margin-right: pxTorem(10px);
        }
    }
    .gk-yc-success{
        font-size: 18px;
        color: #027F59;
        letter-spacing: 0;
        padding: pxTorem(10px);
        margin-top: pxTorem(15px);
        img{
            width: pxTorem(22.1px);
            height: pxTorem(17.8px);
            margin-right: pxTorem(10px);
        }
    }
    .gk-yc-intro{
        overflow: hidden;
        .img{
            width: pxTorem(100px);
            height: pxTorem(100px);
            float: left;
            margin-right: pxTorem(20px);
        }
 
        .gk-yc-intro-detail{
            font-size: pxTorem(14px);
            color: #030303;
            letter-spacing: 0;
            padding-top: pxTorem(20px);
            p:last-child{
                margin-top: pxTorem(20px);
            }
        }
    }
    .btnVip{
        display: inline-block;
        background: #027F59;
        border-radius: 2px;
        width: pxTorem(200px);
        height: pxTorem(36px);
        font-size: pxTorem(16px);
        color: #FFFFFF;
        letter-spacing: 0;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin: pxTorem(30px) auto;
        img{
            margin-right: pxTorem(6px);
            width: pxTorem(15.3px);
            height: pxTorem(17.5px);
        }
    }
    #verify-success{
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 320px){
    html{
        font-size: 14px;
    }
}